<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '个人电子签名',
    layout: false,
    'app-plus': {
      background: '#f8f8f8',
    },
  },
}
</route>
<template>
  <view style="display: flex; flex-direction: column; height: 100vh">
    <wd-navbar title="个人电子签名" :bordered="false" safeAreaInsetTop>
      <template #left>
        <wd-icon name="thin-arrow-left" size="22px" color="white" @click="goBack"></wd-icon>
      </template>
    </wd-navbar>
    <view class="row" @click="showSignActions">
      <view style="flex-shrink: 0">电子签名：</view>
      <view>
        <image v-if="signature" class="signature" mode="aspectFill" :src="signature"></image>
        <view v-else class="btn color-primary">上传签名</view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
// import { baseRequest, BASE_URL } from '@/utils/api/request';
import { uploadSignature, uploadFile, getPersonByPersonCode } from '@/service/pm-requirement';
import { useUserStore } from '@/stores/user';

const userStore = useUserStore();
const signature = ref('');
const userInfo = ref({});

const showSignActions = () => {
  uni.showActionSheet({
    title: '',
    itemList: ['选图上传', '手写上传'],
    success: (res) => {
      uni.$off('pm-requirement-sign');
      if (res.tapIndex === 0) {
        chooseSignature();
      }
      if (res.tapIndex === 1) {
        toSignature();
      }
    },
  });
};

const upload = (file) => {
  return new Promise((resolve, reject) => {
    uploadFile(file)
      .then((res) => {
        if (res.code !== 0) {
          reject(res.msg);
          return;
        }
        resolve(res.data.url);
      })
      .catch((err) => {
        console.log(err.msg || err.message || err.error || '上传签名失败');
        reject(err.msg || err.message || err.error || '上传签名失败');
      });
  });
};

const chooseSignature = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['original', 'compressed'],
    sourceType: ['album'],
    mediaType: 'mix',
    crop: {
      quality: 100,
      width: 560,
      height: 280,
      resize: false,
    },
    success: async (files) => {
      console.log(files.tempFiles);
      const tempFile = files.tempFiles[0];
      try {
        const url = await upload(tempFile.path);
        console.log(url);
        debugger;
        saveSignature(url);
      } catch (error) {
        debugger;
        uni.showToast({
          title: error.message || error,
          icon: 'none',
        });
      }
    },
  });
};

const toSignature = () => {
  uni.$once('pm-requirement-sign', (e) => {
    console.log(e);
    saveSignature(e);
  });
  uni.navigateTo({
    url: '/pages/pm/requirement/autograph',
  });
};

const saveSignature = (signatureUrl) => {
  uploadSignature({
    id: userInfo.value.id,
    signature: signatureUrl,
  })
    .then((res) => {
      if (res.code === 0) {
        signature.value = signatureUrl;
        uni.showToast({
          title: '签名保存成功',
        });
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
        });
      }
    })
    .catch((err) => {
      uni.showToast({
        title: err.msg || err.message || err.error || '保存签名失败！',
        icon: 'none',
      });
    });
};

const getInfo = () => {
  // 获取用户的岗位 和签字
  const userInfos = userStore.userInfos;
  const cusPerson = userInfos.user.username;
  getPersonByPersonCode({
    personCode: cusPerson,
  }).then((res) => {
    const sign = res.data.signature;
    signature.value = sign;
    userInfo.value = res.data;
  });
};

onLoad(() => {
  getInfo();
  uni.$off('pm-requirement-sign');
});

const goBack = () => {
  uni.navigateBack();
};
</script>

<style scoped>
.row {
  display: flex;
  flex: 1;
  justify-content: space-between;
  height: 0;
  padding: 0 30rpx;
  font-size: 30rpx;
  line-height: 100rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #f1f1f1;
}

.signature {
  width: 300rpx;
  height: 200rpx;
}
</style>
